<!doctype html>
<style>*{padding:0;margin:0}</style>
<div style="overflow:hidden;height:125px;position:relative">
  <!--[if lt IE 9]>.sprite{background-image: url(sprite.png)!important}<![endif]-->
  <style>
    /* HELPERS */
    .animated {
      -webkit-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -moz-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -o-transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      transition:all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
      -webkit-transition-property: width, height, left, right, opacity;
      -moz-transition-property: width, height, left, right, opacity;
      -ms-transition-property: width, height, left, right, opacity;
      -o-transition-property: width, height, left, right, opacity;
      transition-property: width, height, left, right, opacity;
    }
    .gradient1 {
      background:#66676a;
      background:-moz-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #66676a), color-stop(100%, #1a1a1a));
      background:-webkit-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background:-o-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background:-ms-linear-gradient(top, #66676a 0%, #1a1a1a 100%);
      background:linear-gradient(to bottom, #66676a 0%, #1a1a1a 100%);
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#66676a", endColorstr="#1a1a1a", GradientType=0 );
    }
    .gradient2 {
      background:#1a1a1a;
      background:-moz-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background:-webkit-gradient(linear, left top, right top, color-stop(0%, #1a1a1a), color-stop(100%, #66676a));
      background:-webkit-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background:-o-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background:-ms-linear-gradient(left, #1a1a1a 0%, #66676a 100%);
      background:linear-gradient(to right, #1a1a1a 0%, #66676a 100%);
      filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#1a1a1a", endColorstr="#66676a", GradientType=1 );
    }
    .translateA {
      -webkit-transform: translate3D(-50%, 0, 1px);
      -moz-transform: translate3D(-50%, 0, 1px);
      -ms-transform: translate3D(-50%, 0, 1px);
      -o-transform: translate3D(-50%, 0, 1px);
      transform: translate3D(-50%, 0, 1px);
    }
    .sprite {
      background:transparent url('') no-repeat scroll 0 0;
    }
    /* ELEMENTS */
    .wrapper_sl {position:absolute;left:0px;bottom:0px;width:100%;height:100px;background:black;-webkit-box-shadow:0 -1px 5px 0 #222222;box-shadow:0 -1px 5px 0 #222222;cursor:pointer}
    .persistent_sl {float:left;width:100px;position:relative;height:100px;z-index:4}
    .logo_sl {background-position:-180px -177px;height:79px;width:79px;margin:10px}
    .ad_slides {display:inline-block;position:relative;width:90%;width:calc(100% - 100px);height:100%}
    .ad_slide {position:absolute;height:125px;min-width:25%;bottom:0px;overflow:hidden;z-index:2}
    .ad_slide .slide_inner_sl {height:100px;width:100%;position:absolute;bottom:0px}
    .ad_slide .girl_sl {position:absolute;left:50%;bottom:0px}
    .ad_slide .cta_sl {position:absolute;width:70px;height:28px;bottom:10px;left:50%;opacity:0;background-position:-180px 0;}
    .ad_slide:hover .cta_sl {background-position:-180px -28px}
    .ad_slide .tagline_sl {position:absolute;left:50%;opacity:0}
    /* SLIDES */
    #ad_slide_1 .girl_sl {background-position:-10px -10px;height:124px;width:117px}
    #ad_slide_1 .tagline_sl {width:78px;height:15px;top:15px;background-position:-180px -65px}
    #ad_slide_2 .girl_sl {background-position:-10px -154px;height:124px;width:124px}
    #ad_slide_2 .tagline_sl {width:82px;height:37px;top:15px;background-position:-180px -90px}
    #ad_slide_3 .girl_sl {background-position:-10px -295.5px;height:129px;width:160px}
    #ad_slide_3 .tagline_sl {width:79px;height:33px;top:15px;background-position:-180px -138px}
    /* SLIDE 1 ACTIVE*/
    #_ad_slide_1 #ad_slide_1 {left:0;right:50%;z-index:3}
    #_ad_slide_1 #ad_slide_2 {left:50%;right:25%}
    #_ad_slide_1 #ad_slide_3 {left:75%;right:0}
    /* SLIDE 2 ACTIVE*/
    #_ad_slide_2 #ad_slide_1 {left:0;right:75%}
    #_ad_slide_2 #ad_slide_2 {left:25%;right:25%;z-index:3}
    #_ad_slide_2 #ad_slide_3 {left:75%;right:0}
    /* SLIDE 3 ACTIVE*/
    #_ad_slide_3 #ad_slide_1 {left:0;right:75%}
    #_ad_slide_3 #ad_slide_2 {left:25%;right:50%}
    #_ad_slide_3 #ad_slide_3 {left:50%;right:0;z-index:3}

    #_ad_slide_1 #ad_slide_1 .slide_inner_sl,
    #_ad_slide_2 #ad_slide_2 .slide_inner_sl,
    #_ad_slide_3 #ad_slide_3 .slide_inner_sl {height:110px;box-shadow:0px 0px 5px #000}
    #_ad_slide_1 #ad_slide_1 .cta_sl, #_ad_slide_1 #ad_slide_1 .tagline_sl,
    #_ad_slide_2 #ad_slide_2 .cta_sl, #_ad_slide_2 #ad_slide_2 .tagline_sl,
    #_ad_slide_3 #ad_slide_3 .cta_sl, #_ad_slide_3 #ad_slide_3 .tagline_sl {opacity:1}
    #_ad_slide_1 #ad_slide_1 .translateA,
    #_ad_slide_2 #ad_slide_2 .translateA,
    #_ad_slide_3 #ad_slide_3 .translateA {
      -webkit-transform: translate3D(-100%, 0, 1px);
      -moz-transform: translate3D(-100%, 0, 1px);
      -ms-transform: translate3D(-100%, 0, 1px);
      -o-transform: translate3D(-100%, 0, 1px);
      transform: translate3D(-100%, 0, 1px);
    }
  </style>
  <div class="wrapper_sl">
    <div class="persistent_sl gradient1">
      <div class="sprite logo_sl"></div>
    </div>
    <div class="ad_slides" id="_ad_slide_1">
      <div class="ad_slide animated" id="ad_slide_1" onmouseenter="this.parentNode.id='_'+this.id">
        <div class="slide_inner_sl gradient2 animated">
          <div class="sprite girl_sl animated translateA"></div>
          <div class="sprite tagline_sl animated"></div>
          <div class="sprite cta_sl animated"></div>
        </div>
      </div>
      <div class="ad_slide animated" id="ad_slide_2" onmouseenter="this.parentNode.id='_'+this.id">
        <div class="slide_inner_sl gradient2 animated">
          <div class="sprite girl_sl animated translateA"></div>
          <div class="sprite tagline_sl animated"></div>
          <div class="sprite cta_sl animated"></div>
        </div>
      </div>
      <div class="ad_slide animated" id="ad_slide_3" onmouseenter="this.parentNode.id='_'+this.id">
        <div class="slide_inner_sl gradient2 animated">
          <div class="sprite girl_sl animated translateA"></div>
          <div class="sprite tagline_sl animated"></div>
          <div class="sprite cta_sl animated"></div>
        </div>
      </div>
    </div>
  </div>
</div>
